01 - HTML 基础

HTML 简介

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Website!</h1>
    <p>This is the first paragraph of my webpage.</p>
    <img src="image.jpg" alt="Image description" />
    <a href="https://www.example.com">Click here</a> to visit an example website.
  </body>
</html>

标签语法

HTML 基本骨架

<!DOCTYPE html>
<html>
  <head>
    <title>欢迎来到我的网站</title>
  </head>
  <body>
    <h1>欢迎！</h1>
    <p>这是一个示例网页。</p>
    <img src="image.jpg" alt="示例图片" />
    <a href="https://example.com">点击这里</a>访问示例链接。
  </body>
</html>

标签的关系

注释

<!DOCTYPE html>
<html>
  <head>
    <title>注释示例</title>
  </head>
  <body>
    <!-- 页面主体内容 -->
    <h1>欢迎来到我们的网站！</h1>

    <p>这是一个示例页面，用于演示注释的使用。</p>

    <!--
    <p>这个段落被注释掉了，不会在网页上显示。</p>
    -->

    <p>感谢您的访问！</p>
  </body>
</html>

标题 Heading 和段落 Paragraph 标签

<!DOCTYPE html>
<html>
  <head>
    <title>标题和段落示例</title>
  </head>
  <body>
    <h1>欢迎来到我们的网站！</h1>

    <h2>关于我们</h2>
    <p>我们是一家专注于前端开发的公司，致力于提供高质量的网站和应用程序。</p>

    <h2>联系方式</h2>
    <p>如果您有任何问题或合作机会，请联系我们：info@example.com</p>
  </body>
</html>

换行 br 和水平线标签 hr

<!DOCTYPE html>
<html>
  <head>
    <title>换行和水平线示例</title>
  </head>
  <body>
    <h1>欢迎来到我们的网站！</h1>

    <h2>关于我们</h2>
    <p>
      我们是一家专注于前端开发的公司，<br />
      致力于提供高质量的网站和应用程序。
    </p>
    <hr />

    <h2>联系方式</h2>
    <p>
      如果您有任何问题或合作机会，请联系我们：<br />
      info@example.com
    </p>
  </body>
</html>

文本格式化标签

标签名 效果
<b> 或 <strong> 加粗文本显示（Bold）
<i> 或 <em> 斜体文本显示（Italic）
<u> 或 <ins> 下划线文本显示（Underline）
<s> 或 <del> 删除线文本显示（Strikethrough）
<sup> 和 <sub> 上标、下标文本显示（Superscript and Subscript）
<big> 和 <small> 放大、缩小文本字号
<font> 定义文本的字体、颜色和大小
<pre> 保留空格和换行，以保持文本的原始格式
<code> 显示计算机代码块
<mark> 高亮文本显示
<blockquote> 缩进文本显示为块引用
<cite> 引用文本显示
<q> 短引用文本显示（Quote）
注意

为了遵循最佳实践，应将这些标签用于其本意和语义，而不仅仅是为了视觉效果。

图像标签 img

<!DOCTYPE html>
<html>
  <head>
    <title>图像标签示例</title>
    <style>
      .img-style {
        width: 300px;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <img src="example.jpg" alt="示例图像" class="img-style" />
  </body>
</html>

相对路径和绝对路径

超链接标签 a

<!DOCTYPE html>
<html>
  <head>
    <title>超链接标签示例</title>
    <style>
      .external-link {
        color: blue;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>欢迎来到我们的网站！</h1>

    <h2>导航菜单</h2>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="about.html">关于我们</a></li>
      <li><a href="contact.html">联系我们</a></li>
    </ul>

    <h2>更多资源</h2>
    <p>请查看我们的<a href="https://www.example.com" target="_blank">官方网站</a>获取更多信息。</p>

    <h2>外部链接样式</h2>
    <p>这是一个外部链接：<a href="https://www.example.com" class="external-link">点击访问</a></p>
  </body>
</html>

音频标签 audio 和视频标签 video

<audio src="audio.mp3" controls autoplay loop>
  <p>您的浏览器不支持 audio 标签</p>
</audio>

<video src="video.mp4" controls autoplay loop>
  <p>您的浏览器不支持 video 标签</p>
</video>

综合案例 1

个人简介

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人简介</title>
  </head>

  <body>
    <h1>尤雨溪</h1>
    <hr />

    <p>
      尤雨溪，前端框架 <a href="#">Vue.js</a> 的作者，<a href="#"> HTML5 </a>版 Clear 的打造人，独立开源开发者。曾就职于
      Google Creative Labs 和 Meteor Development Group。由于工作中大量接触开源的项目
      <a href="#">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护 <a href="#">Vue.js</a>。
    </p>
    <img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪" />

    <h2>学习经历</h2>
    <p>
      尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于 Colgate University，后在 Parsons 设计学院获得 Design &
      Technology 艺术硕士学位，任职于纽约 Google Creative Lab。
    </p>

    <h2>主要成就</h2>
    <p>
      尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，
      <ins>正是在读硕士期间，他偶然接触到了 JavaScript，从此被这门编程语言深深吸引，开启了自己的前端生涯</ins> 。
    </p>
    <p>
      2014 年 2 月，开发了一个前端开发库 Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的 API
      提供高效的数据绑定和灵活的组件系统。
    </p>

    <h2>社会任职</h2>
    <p>
      2016 年 9 月 3 日，在南京的 JSConf 上，Vue 作者尤雨溪正式宣布加盟阿里巴巴 Weex
      团队，尤雨溪称他将以技术顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue
      的语法跨三端。
    </p>
  </body>
</html>

Vue 简介

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 简介</title>
  </head>

  <body>
    <h1>Vue.js</h1>
    <p>
      Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是，Vue
      被设计为可以自底向上逐层应用。Vue
      的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue
      也完全能够为复杂的单页应用（SPA）提供驱动。
    </p>
    <p>其作者为<a href="#" target="_blank">尤雨溪</a></p>

    <h2>主要功能</h2>
    <p>
      Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue
      的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue
      完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
    </p>
    <p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
    <p>
      Vue.js
      自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时
      [2] ，Vue.js 也能驱动复杂的单页应用。
    </p>
    <video src="../media/vue.mp4" controls muted autoplay loop></video>
  </body>
</html>